<template>
	<view class="container">
		<view
			:style="{
				margin: `30rpx`,
				backgroundImage: `linear-gradient(0deg, #0f8b34 0%, #3ec483 100%)`,
			}"
			class="color-fff ai-center pt-60 pb-60 br-24"
		>
			<navigator v-if="userInfo.nickname" url="/pages/mine/Profile" class="ai-center">
				<image
					class="bgc-fff br-circle"
					:style="{
						width: `144rpx`,
						height: `144rpx`,
						border: `6rpx solid #fff`,
					}"
					:src="userInfo.headimgurl"
					mode="aspectFill"
				/>
				<text class="mt-20 fs-30">{{ userInfo.nickname }}</text>
				<text class="mt-20 fs-24">
					{{ ["", "司机", "搬运工", "安装工"][identity] }}
				</text>
			</navigator>
			<button v-else class="fs-32 lh-2" type="primary" @click="getUserProfile">
				授权获取信息
			</button>
		</view>

		<view class="section fd-row pt-36 pb-36">
			<view
				v-for="(option, index) in options"
				:key="index"
				@click="toOrderPage(index)"
				class="ai-center f1"
				hover-class="tap-hover"
				hover-stay-time="50"
			>
				<image
					class="width-82 height-82"
					:src="`/static/images/icon-${option.name}.png`"
					mode="aspectFit"
				/>
				<text class="color-1b1b1b fs-24 mt-20">{{ option.value }}</text>
			</view>
		</view>

		<view class="section">
			<block v-for="(menu, key) in menus" :key="key">
				<view
					v-if="menu"
					hover-class="tap-hover"
					hover-stay-time="50"
					class="jc-sb fd-row lh-1"
					:style="{
						padding: `40rpx 30rpx`,
						borderBottom: `1rpx solid #eee`,
					}"
					@click="toOtherPage(key)"
				>
					<text class="fs-28 color-1b1b1b">{{ menu }}</text>
					<uni-icons type="arrowright" color="#999" />
				</view>
			</block>

			<button
				hover-class="tap-hover"
				hover-stay-time="50"
				class="jc-sb fd-row border-none ai-center lh-1"
				:plain="true"
				:style="{
					padding: `40rpx 30rpx`,
					margin: 0,
				}"
				@click="toOtherPage('customService')"
			>
				<text class="fs-28 color-1b1b1b">联系客服</text>
				<uni-icons type="arrowright" color="#999" />
			</button>
		</view>
	</view>
</template>

<script lang="ts">
	import { Vue, Component } from "vue-property-decorator";
	import uniIcons from "@/components/uni-icons.vue";

	@Component({ components: { uniIcons } })
	export default class Mine extends Vue {
		// component property
		options: AnyObject[] = [
			{ name: "start", value: "待出发" },
			{ name: "pending", value: "装货中" },
			{ name: "waiting", value: "卸货中" },
			{ name: "completed", value: "已完成" },
		];

		userInfo: AnyObject = {};

		public get identity(): number {
			return this.$store.state.identity;
		}

		public get menus(): AnyObject {
			const { identity, userInfo } = this;
			const { driver_status, hamal_status, erector_status } = userInfo;

			const options: AnyObject = {};

			if (identity) {
				options.Commission = "佣金";
				options.user = "用户端";
			} else {
				options.JoinPanda = "加入Panda大师";
			}

			if (driver_status === 1 && identity !== 1) {
				options.driver = "司机端";
			}
			if (hamal_status === 1 && identity !== 2) {
				options.carrier = "搬运工";
			}
			if (erector_status === 1 && identity !== 3) {
				options.installer = "安装工";
			}

			return options;
		}

		onShow() {
			this.$request.get("/user/getinfo").then(({ data }) => (this.userInfo = data));
		}

		getUserProfile() {
			wx.getUserProfile({
				desc: "登录",
				success: ({ userInfo }) => {
					this.$request
						.post("/user/saveuser", userInfo)
						.then(({ data }) => (this.userInfo = data));
				},
			});
		}

		toOrderPage(index: number) {
			this.$store.commit("changeOrderTabIndex", index);
			uni.switchTab({ url: "/pages/tabs/Order" });
		}
		toOtherPage(key: string) {
			switch (key) {
				case "JoinPanda":
					if (!this.userInfo.nickname) {
						this.getUserProfile();
						break;
					}
				case "Commission":
					uni.navigateTo({ url: `/pages/mine/${key}` });
					break;
				case "user":
				case "driver":
				case "carrier":
				case "installer":
					const maps = { user: 0, driver: 1, carrier: 2, installer: 3 };
					this.$store.commit("changeIdentity", maps[key]);
					uni.switchTab({ url: "/pages/tabs/Home" });
					break;
				case "customService":
					uni.makePhoneCall({ phoneNumber: "65783087" });
					break;
				default:
					break;
			}
		}
	}
</script>

<style lang="scss" scoped>
	// scss
	.section {
		margin: 30rpx;
		box-shadow: 0 0 16rpx 0 rgba(0, 0, 0, 0.15);
		border-radius: 10rpx;
	}
</style>